<template>
  <div>
    <div/>
    <div style="max-height: 60vh; overflow-y: scroll">
      <!-- <el-collapse v-model="activeNames" @change="handleChange"> -->
      <!-- <el-collapse-item title="服务实例" name="1"> -->
      <div>
        <el-table :data="pv" style="width: 100%" :empty-text="emptyText">
          <el-table-column prop="name" label="名称" align="center"/>
          <el-table-column
            prop="storageClassName"
            label="存储类"
            align="center"
          />
          <el-table-column prop="accessMode" label="访问模式" align="center"/>
          <el-table-column prop="status" label="状态" align="center"/>
          <el-table-column prop="capacity" label="容量(GB)" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center"/>
        </el-table>
      </div>
      <!-- </el-collapse-item> -->
      <!-- </el-collapse> -->
    </div>
  </div>
</template>

<script>
  export default {
    name: "PersistentVolume",
    props: {
      pvcId: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        activeNames: ["1"],
        pv: [],
        emptyText: "暂无数据",
      };
    },
    mounted() {
      this.getPersistentVolumeByPvcId();
      if (this.pv.length === 0) {
        this.emptyText = "暂无数据";
      }
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      getPersistentVolumeByPvcId() {
        this.$storagePvcApi.getPvInfoByPvcId(this.pvcId).then((res) => {
          if (res && res.code === 200) {
            this.pv = res.data;
          }
        });
      },
    },
  };
</script>

<style scoped>
  .spanStyle {
    font-size: 16px;
  }
</style>
